<template>
  <div>
    <header>
      <top-bar :config="configs[selectedIndex]"></top-bar>
      <index-nav-bar @redirectToOther="handleRedirect" :config="configs[selectedIndex]"></index-nav-bar>
    </header>
    <keep-alive>
      <component :is="currentPage"></component>
    </keep-alive>

  </div>
</template>

<script>

import NavigationBottom from "@/components/content/navigation/NavigationBottom.vue";

import TopBar from "@/components/views/index/topBar.vue";
import IndexNavBar from "@/components/views/index/IndexNavBar.vue";
import IndexCarousel from "@/components/views/index/tv/IndexCarousel.vue";
import NavigationIndex from "@/components/views/index/tv/NavigationIndex.vue";
import IndexBlocks from "@/components/views/index/tv/IndexBlocks.vue";
import television from "@/components/views/index/tv/television.vue";
import selected from "@/components/views/index/selected/selected.vue";

export default {
  name: 'HomeView',
  data() {
    return {
      currentPage: 'selected',
      pageList: [
        'selected',
        'television',
        'selected',
        'selected',
        'selected',
        'selected',
      ],
      configs: [
        {
          index:0,
          search: {
            history: require('@/assets/icon/index/history1.png'),
            add: require('@/assets/icon/index/add1.png')
          },
          nav: {
            style: {
              color:'black'
            }
          }
        },
        {
          search: {
            history: require('@/assets/icon/index/history.png'),
            add: require('@/assets/icon/index/add.png')
          },
          index:1,
          nav: {
            style: {
              color:'white'
            }
          }
        },
        {
          index:0,
          search: {
            history: require('@/assets/icon/index/history1.png'),
            add: require('@/assets/icon/index/add1.png')
          },
          nav: {
            style: {
              color:'black'
            }
          }
        },
        {
          index:0,
          search: {
            history: require('@/assets/icon/index/history1.png'),
            add: require('@/assets/icon/index/add1.png')
          },
          nav: {
            style: {
              color:'black'
            }
          }
        },
        {
          index:0,
          search: {
            history: require('@/assets/icon/index/history1.png'),
            add: require('@/assets/icon/index/add1.png')
          },
          nav: {
            style: {
              color:'black'
            }
          }
        },
        {
          index:0,
          search: {
            history: require('@/assets/icon/index/history1.png'),
            add: require('@/assets/icon/index/add1.png')
          },
          nav: {
            style: {
              color:'black'
            }
          }
        },
      ],
      selectedIndex:0
    }
  },
  methods: {
    handleRedirect(index) {
      this.selectedIndex = index
      this.currentPage = this.pageList[index]
    }
  },
  components: {
    IndexBlocks,
    NavigationIndex,
    IndexCarousel,
    IndexNavBar,
    TopBar,
    NavigationBottom,
    television,
    selected
  }
}
</script>
<style scoped lang="scss">
.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  text-align: center;
  align-items: center;
  margin-bottom: 10px;
}

.Placeholder {
  height: 62px;
}
</style>
